<template>
  <div class="bg-slate-200 flex justify-center items-center w-64 h-auto fixed absolute top-12 right-4 rounded-xl overflow-hidden px-2">
    <!-- 个人信息 -->
    <div @click="router.push({name:'login'})" class="flex justify-start w-full h-20 my-4 rounded-2xl hover:bg-slate-300">
      <!-- 左侧头像 -->
      <div class="w-1/3 h-full pl-2 flex justify-center items-center">
        <div class="rounded-full aspect-square h-2/3 flex justify-center items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="aspect-square h-3/6" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M384 48c8.8 0 16 7.2 16 16V448c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H384zM96 0C60.7 0 32 28.7 32 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zM240 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16H336c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80H208zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zM496 192c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V336z"/></svg>
        </div>
      </div>
      <!-- 右侧信息 -->
      <div class="w-2/3 h-full pl-2 flex flex-col justify-center">
        <div class="cursor-default">去登录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
</script>

<style scoped>

</style>
